require(['./config'], () => {
    require(['jquery', 'artTemplate','loadHeaderFooter', 'jquery.cookie', 'jquery.querystring'], ($, template) => {
        //获取当前商品的商品id
        const id = $.queryString().id
        // 发送网络请求，查询商品详情数据
        $.ajax({
            url: 'http://www.xiongmaoyouxuan.com/api/detail?id=' + id,
            method: 'GET',
            data:{
                normal:1
            }
        }).done((resData) => {
            const html = template('detail-temp', {goods: resData.data.detail})
            $('.con').html(html)
        })

        // 点击购物车跳转到购物车页面
        $('header').on('click', '.top-car' , () => {
            location.href = '/html/cart.html'
        })

        // 修改商品数量
        $('.detail').on('click', '.cut-btn , .add-btn', e => {
            // 获取当前数量
            let amount = parseInt($('.detail').find('.amount').val())
            // 判断加还是减
            if ($(e.currentTarget).is('.cut-btn')) {// 减
               if (amount > 1) {
                   amount -= 1
               }
            } else { // 加
                amount += 1
            }
            // 将数量载入页面
            $('.detail').find('.amount').val(amount)
        })

        // 为加入购物车绑定点击事件,利用事件委派
        $('.detail').on('click' , '.add-cart', e => {
            // 将当前商品信息以数组形式保存至本地cookie中
            // console.log($(e.currentTarget).data('good'))
            // 解构当前商品所需要的信息
            const {id, image, title, price} = $(e.currentTarget).data('good')
            // 读取需要加入购车的数量
            const amount = $('.detail').find('.amount').val()
            // 构建当前选购商品需要保存的对象信息
            const currentProduct = {
                id,
                image,
                title,
                price,
                amount
            }
            //从本地存储中读取保存的购物车数组，如果没有则创建空数组
            const cart = JSON.parse(localStorage.getItem('cart')) || []
            // 判断购物车中是否保存了当前选购商品，如果存在则只添加数量
            // 如果不存在则添加到数组中
            const has = cart.some(prod => prod.id === currentProduct.id)
            if (!has) {// 表示不存在
                cart.push(currentProduct)
            }

            // 将商品信息保存到本地
            localStorage.setItem('cart', JSON.stringify(cart))

            // 弹出成功框
            $('.prom').show()
            setTimeout(() => {
                $('.prom').hide()
            },1500)

            
        })
        /**************** tab切换 ******************/ 
        // 给所有小图绑定点击事件
        $('.con').on('click' ,'li', e => {
            // 切换类名
            const index = $(e.currentTarget).index()
            $(e.currentTarget).addClass('active').siblings().removeClass('active')
            $(e.currentTarget).parents('.thumb').siblings('.main').children().eq(index).addClass('active').siblings().removeClass('active')
        })
        // 给按钮绑定点击事件
        $('.con').on('click', 'm-up , m-down' , e => {
            // 判断是上还是下
            if ($(e.currentTarget.is('.m-up'))) {// 上
                console.log('上')
            }else{
                console.log('下')
            }
        })

        /************* 点击登陆弹出协议框及页面跳转 ****************/
        // 绑定点击事件
        $('body').on('click', '.log-in , .agree , .n-agree , .close', e => {
            if ($(e.currentTarget).is('.log-in')) {// 登陆弹出协议
                $('.login').css({'display':"block"})
                return false
            }else if ($(e.currentTarget).is('.agree')) {// 同意并跳转
                location.href = '/html/login.html'
                $('.login').css({'display':"none"})
            } else {// 不同意或者关闭协议框
                location.reload()
                $('.login').css({'display':"none"})
            }
        })

        /************* 点击注册弹出协议框及页面跳转 ****************/
        // 绑定点击事件
        $('body').on('click', '.sign-up', () => {
            location.href = '/html/sign-up.html'
        })

    })
})